<!DOCTYPE html>
<html lang="en" ng-app="demo">
    <head>
        <meta charset="utf-8">
        <title>AngularJS ui-mask</title>

        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">

        <!-- ui-mask files -->
        <script src="../dist/mask.js"></script>
    </head>

    <body class="container">

        <script>
            var app = angular.module('demo', ['ui.mask']);
        </script>
        <section id="mask">
            <div class="page-header">
                <h1>Mask</h1>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h3>What?</h3>

                    <p>Apply a mask on an input field so the user can only type pre-determined pattern.</p>
                    <form name="demo" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3" for="masked">Masked Input:</label>

                            <div class="col-sm-9">
                                <input class="form-control" id="masked" name="masked" ui-mask="{{y}}" ng-model="x" placeholder="Write a mask or click a button" ui-mask-placeholder>
                                <span class="help-inline">
                                    <div ng-show="x.length">Model value: <code>{{x}}</code></div>
                                    <div ng-hide="x.length">Model value: <code>undefined</code></div>
                                    <div ng-show="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>{{demo.masked.$viewValue}}</code></div>
                                    <div ng-hide="demo.masked.$viewValue.length">NgModelController.$viewValue: <code>undefined</code></div>
                                </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3" for="definition">Mask Definition:</label>

                            <div class="col-sm-9">
                                <input class="form-control" id="definition" ng-model="y" style="vertical-align: top;">
                                <span class="help-inline">
                                    <code>A</code> Any letter.<br>
                                    <code>9</code> Any number.<br>
                                    <code>*</code> Any letter or number.<br>
                                    <code>?</code> Make any part of the mask optional.
                                </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3">Predefined masks:</label>

                            <div class="col-sm-9">
                                <p>
                                    <button class="btn btn-default" ng-click="y = undefined">Set to undefined (uninitialize)</button>
                                </p>
                                <p>
                                    <button class="btn btn-default" ng-click="y = '(999) 999-9999'">Set to (999) 999-9999</button>
                                </p>
                                <p>
                                    <button class="btn btn-default" ng-click="y = '(999) 999-9999 ext. 999'">Set to (999) 999-9999 ext. 999</button>
                                </p>
                                <p>
                                    <button class="btn btn-default" ng-click="y = '(999) 999-9999 ext. ?9?9?9'">Set to (999) 999-9999 ext. ?9?9?9</button>
                                </p>
                                <p>
                                    <button class="btn btn-default" ng-click="y = '(**: AAA-999)'">Set to (**: AAA-999)</button>
                                </p>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="col-md-6">
                    <h3>How?</h3>
                    <pre class="prettyprint">&lt;input type=&quot;text&quot; ng-model=&quot;phonenumber&quot; ui-mask=&quot;(999) 999-9999&quot;/&gt;</pre>
                    <p>Replace &quot;(999) 999-9999&quot; with your desired mask.</p>
                </div>
            </div>
        </section>

    </body>
</html>